<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .language {
            width: 100%;
            height: 35px;
            background-color: rgb(17, 17, 17);
        }

        .language>ul {
            float: right;
            margin-right: 80px;
        }

        .language>ul>li {
            width: 80px;
            height: 35px;
            float: left;
            margin-left: 5px;
            list-style: none;
        }

        .language>ul>li:nth-of-type(1) {
            background: url(./img/lag.png);
        }

        .language>ul>li:nth-of-type(1):hover {
            background: url(./img/lag.png) no-repeat -80px 0;
        }

        .language>ul>li:nth-of-type(2) {
            background: url(./img/lag.png) no-repeat 0px -33px;
        }

        .language>ul>li:nth-of-type(2):hover {
            background: url(./img/lag.png) no-repeat -80px -33px;
        }

        .language>ul>li:nth-of-type(3) {
            background: url(./img/lag.png) no-repeat 0px -66px;
        }

        .language>ul>li:nth-of-type(3):hover {
            background: url(./img/lag.png) no-repeat -80px -66px;
        }

        .language>ul>li:nth-of-type(4) {
            background: url(./img/lag.png) no-repeat 0px -99px;
        }

        .language>ul>li:nth-of-type(4):hover {
            background: url(./img/lag.png) no-repeat -80px -99px;
        }

        .language>ul>li:nth-of-type(5) {
            padding-left: 30px;
            font-size: 14px;
            line-height: 35px;
            background: url(./img/b7.png) no-repeat 3px 0;
            background-color: #3c87c7;
        }
        .nav {
            width: 100%;
            height: 70px;
            background-color: #0e2a48;
        }

        a {
            text-decoration: none;
            color: #101111ce;
        }

        /* 导航条 */
        .nav>ul {
            margin-left: 310px;
            height: 70px;
        }
        .nav>ul>li {
                height: 70px;
                padding: 0 10px;
                float: left;
                list-style: none;
                position: relative;
                margin-right: 10px;
        }

        .nav>ul>li>a {
                color: white;
                line-height: 70px;
        }

            /* 留出页面最上面的距离 */
        .header {
                margin-top: 15px;
        }

        #home {
                position: absolute;
                top: 19px;
        }

        #homeli {
                width: 40px;
        }

        .continer {
                width: 70%;
            
                margin: 0 auto;
                padding-bottom: 85px;
                margin-top: 15px;
        }

        .continer>.title {
                width: 100%;
                height: 60px;
                font-size: 20px;
                font-weight: 700;
                line-height: 60px;
                background-color: #28609f;
                color: white;
                padding: 0 18px;
                box-sizing: border-box;

        }

        a {
                text-decoration: none;
                font-size: 16px;
                font-weight: 600;
                font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }

        .continer>ul>li {
                margin: 5px 0;
                list-style: none;
                margin-left: 20px;
                height: 70px;
                overflow: hidden;
                box-sizing: border-box;
                border-bottom: 1px
        }

        .continer>ul>li:hover {
                background-color: aliceblue;
        }

        .continer>ul>li>p {
                margin-top: 13px;
        }

        .continer>ul>li>span {
                font-size: 12px;
                color: #999;
                display: inline-block;
                margin-top: 5px;

        }

        .continer>.bottom {
                text-align: center;
                width: 100%;
                line-height: 55px;
                color: #333;
        }

        .continer>.bottom>span {
                font-size: 18px;
                font-weight: bold;

        }

        .content {
            width: 100%;
            margin-top: 15px;

        }

        .content>h1 {
            text-align: center;
            line-height: 60px;
            height: 60px;
            font-weight: 400;
            font-size: 22px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

        .content>.from {
            margin-bottom: 20px;
            text-align: center;
            font-size: 14px;
            color: darkgrey;
        }

        .content>.img {
            text-align: center;
        }

        .content>p {
            line-height: 30px;
            color: rgb(80,80,80);
            text-indent: 2em;
            margin-bottom: 30px;

        }


        .footer {
            width: 100%;
            height: 280px;
            background-color: #282928;
            color: #f2f2f2;
            padding: 30px 90px;
            box-sizing: border-box;
            /*使边框和内边距的值包含在width内，可并排放置几个带边框的框 */
        }

        .footer .footertop {
            width: 100%;
            height: 160px;
            display: flex;
            justify-content: space-between; 
            border-bottom: 1px solid #424242;

        }

        .footertop .left {
            width: 40%;
            height: 140px;
            border-right: 1px solid #424242
        }

        .footertop .left .l {
            width: 50%;
            height: 100%;
            float: left;
        }

        .footertop .left .l h1 {
            font-weight: 700;
            padding-bottom: 20px;
            padding-top: 10px;
        }

        .footertop .left .l p {
            font-size: 14px;
            line-height: 24px;
            letter-spacing: 2px;
        }

        /* .footertop .left .r {
            width: 50%;
            height: 100%;
            padding-left: 20px;
        }

        .footertop .left .r img {
            margin-top: 15px;
        }

        .footertop .left .r p {
            font-size: 12px;
            color: #a5a5a5;
        } */

        /* .footertop .center {
            width: 33.3%;
            height: 160px;
            border-right: 1px solid #424242;
            padding: 10px 15px;
            box-sizing: border-box;
        }

        .footertop .center h3 {
            color: #4c87d1;
            font-size: 16px;

        }

        .footertop .center ul {
            list-style: none;
            width: 100%;
            margin-top: 10px;
        }

        .footertop .center ul li {
            width: 30%;
            float: left;
            font-size: 12px;
            padding-left: 10px;
            line-height: 23px;
            box-sizing: border-box;
            background: url(./img/sm_dot.png) no-repeat 0px 12px;
        }

        .footertop .center ul li:nth-of-type(2) {
            width: 66%;
        }

        .footertop .center ul li:nth-of-type(12) {
            width: 66%;
        }

        .footertop .center ul li:hover {
            color: #7f7b7b;
        } */

        .footertop .right {
            width: 59%;
            height: 160px;
            padding: 10px 15px;
            box-sizing: borde  r-box;
            margin-right: 0;
        }

        .footertop .right h3 {
            color: #4c87d1;
            font-size: 16px;
            margin-left: 20px;
        }

        .footertop .right li img {
            width: 20px;
            list-style: none;
        }

        .footer .footerbottom {
            padding: 40px 0px 25px;
            line-height: 1.4px;
            text-align: center;
            font-size: 14px;
            color: #777a77;
           

        }

        .footer .footerbottom span {
            color: #ffffff;
         
        }


    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="language">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li>9'c~15'c</li>
            </ul>
        </div>
        <!-- 导航条 -->
        <div class="nav">
            <ul>
                <li id="homeLi">
                    <a href="./index.html">
                        <img id="home" src="./img/home.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="./xiaMenSurvey.html">厦门概况</a>
                </li>
                <li>
                    <a href="./tourMsg.html">旅游资讯</a>
                </li>
                <li>
                    <a href="./area.html">景区</a>
                </li>
                <li>
                    <a href="./line.html">线路</a>
                </li>
                <li>
                    <a href="#">美食</a>
                </li>
                <li>
                    <a href="#">酒店</a>
                </li>
                <li>
                    <a href="#">购物</a>
                </li>
                <li>
                    <a href="#">交通</a>
                </li>
                <li>
                    <a href="#">发现金门</a>
                </li>
            </ul>


        </div>
    </div>

    <div class="continer">
        <div class="title">旅游资讯</div>
        <!-- 资讯标题 -->
        <ul>
            <li>
                <p><a href="">本周末文艺演出如同春之花市</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">我市历史风貌建筑达507处</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">来翔安澳头看连环画佳作</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">厦门文旅消费热情高涨 不少实体书店迎来复苏</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">鼓浪屿内厝澳码头“扩容” 承载能力翻了一倍</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">冷空气周日夜间到货 下周二最低气温仅10℃</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">需提前预约！集美儿童乐园火爆开放中</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">第二批全国“文艺两新”集聚区实践基地公布 厦门海丝艺术品中心入选</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">特区形胜有凤来仪 厦门凤凰体育馆本月中旬将正式投用</a></p>
                <span class="time">2023-03-08</span>
            </li>
            <li>
                <p><a href="">春日赏樱邀请函！请查收→</a></p>
                <span class="time">2023-03-08</span>
            </li>
        </ul>
        <p class="bottom">当前第<span>1</span>页 共<span>722</span>页</p>

    </div>

    <!-- 底部 -->
    <div class="footer">
        <!-- 上半部分 -->
        <div class="footertop">
            <div class="left">
                <div class="l">
                    <h1>厦门旅游网</h1>
                    <p>厦门市文化和旅游局</p>
                    <p>文旅宣传推广官方网站</p>
                    <p>全国十佳旅游目的地网站</p>
                </div>
                <!-- <div class="r">
                    <img src="./img/qrcode.jpeg" alt="#">
                    <p>更多精彩内容请关注</p>
                    <p>厦门市文旅局官方微信</p>
                </div> -->
            <!-- </div>
            <div class="center">
                <h3>WWW.VISITXM.COM</h3>
                <ul>
                    <li>厦门概况<>
                    <li>景区 线路 美食 酒店 购物 交通<>
                    <li>会议展览<>
                    <li>旅游资讯<>
                    <li>全域推广联盟<>
                    <li>节庆活动<>
                    <li>旅游线路<>
                    <li>发现金门<>
                    <li>旅游攻略<>
                    <li>图片 视频<>
                    <li>旅游贴士<>
                    <li>厦门市文旅局官方微博<>
                </ul> -->
            </div>
            <div class="right">
                <h3>联系我们</h3>
                <ul>
                    <li>
                        <img src="./img/ico_mail.png">
                        330445074@qq.com
                    </li>
                </ul>
                
            </div>
        </div>
        <!-- 下边的部分 -->
        <p class="footerbottom">
            <span>闽ICP备06013218号-2,</span>
            Copyright 2021 All Right Reserved,
            <span>visitxm.com</span>
        </p>
    </div>

</body>

</html>